<template>
	<view>
		<scroll-view scroll-y class="scrollPage">
			<view class="center-bg">
				<image :src="userInfo.avatarUrl" class="face png" mode="widthFix"></image>
				<view class="text-xl margin-top-sm">{{userInfo.nickName}}
					<text v-if="userInfo.phone" class="cuIcon-mobilefill main-color text-xs"></text>
				</view>
				<view class="margin-top-sm">
					<text :class="userInfo.gender==1?'cuIcon-male':(userInfo.gender==2?'cuIcon-female':none)+ 'text-red'"></text>
					<text class="location">{{userInfo.province}} {{userInfo.city}}</text>
				</view>
				<button v-if="!userInfo.phone" class="cuIcon-mobilefill margin-top-sm" type="primary" size="mini" plain="true" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">未绑定</button>
			</view>
			<view class="cu-list grid col-4">
				<view class="cu-item" v-for="(icon,index) in icons" :key="index" @click="toOrderPage(index+1)">
					<text :class="'cuIcon-'+icon.icon +' lg'"></text>
					<text>{{icon.name}}</text>
				</view>
			</view>
			<view class="split-line"></view>
			<view class="cu-list menu margin-bottom-xl">
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/home/coupon/list" hover-class="none">
						<text class="cuIcon-ticket main-color"></text>
						<text>优惠卷</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/home/address/list" hover-class="none">
						<text class="cuIcon-location main-color"></text>
						<text>地址管理</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/home/favorite/list" hover-class="none">
						<text class="cuIcon-favor main-color"></text>
						<text>我的收藏</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<navigator class="content" url="/pages/home/about/index" hover-class="none">
							<text class="cuIcon-appreciate main-color"></text>
							<text>关于我们</text>
						</navigator>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<button class="content text-left" open-type="contact">
							<text class="cuIcon-service main-color"></text>
							<text>在线客服</text>
						</button>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<button class="content text-left" @click="toMarket">
							<text class="cuIcon-moneybag text-cyan main-color"></text>
							<text>我也要做小程序</text>
						</button>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>
<script>
	import {UserService} from "@/api/UserService.js"
	export default {
		data() {
			return {
				userInfo: undefined,
				icons: [{name:"待付款",icon:"pay"},{name:"待发货",icon:"send"},{name:"待收货",icon:"deliver"},{name:"已完成",icon:"evaluate"}]
			}
		},
		onPullDownRefresh() {
			this.loadUserInfo();
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.loadUserInfo();
		},
		methods: {
			toOrderPage(tabIndex) {
				uni.navigateTo({url:"/pages/home/order/list?index="+tabIndex});
			},
			loadUserInfo(){
				UserService.getCurrentInfo().then(res=>{
					this.userInfo=res;
				});
			},
			decryptPhoneNumber(e){
				const flag=e.detail.errMsg.indexOf("fail")===-1;
				if(flag){
					UserService.bindPhone(e.detail.encryptedData,e.detail.iv).then(()=>{
						this.loadUserInfo();
					});
				}
			},
			toMarket(){
				uni.navigateTo({
					url:"/pages/home/market/market"
				});
			}
		},
	}
</script>
<style>
	.bg-image {
		width: 100%;
		position: absolute;
	}

	.center-bg {
		background-size: cover;
		height: 500rpx;
		display: flex;
		justify-content: center;
		padding-top: 50rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
		background-image: linear-gradient(#ed421700,#ed4217);
	}

	.location {
		opacity: 0.8;
	}

	.face {
		width: 200rpx;
		height: 200rpx;
	}
</style>
